<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <link rel="stylesheet/less" href="./assets/css/index4.less">
    <link rel="stylesheet/less" href="./assets/css/comment.less">
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand wow fadeInUp" href="#">
                    <div class="r"></div>
                    <div class="z"></div>
                    Your Logo
                </a>
                <div class="search"><input type="checkbox" name="in" id="im1">
                    <label for="im1" class="image"><img src="./assets/img/1/Vector Smart Object 3.png" alt=""><input
                            type="text"></label>
                    </li>
                </div>

            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="overflow:hidden ;">


                <ul class="nav navbar-nav navbar-right" style="
        text-transform:capitalize;
                text-align: center;
                font-size: 15px;">
                    <li class="wow fadeInUp" data-wow-delay=".1s"><a href="./index.html">Home</a></li>
                    <li class=" wow fadeInUp" data-wow-delay=".2s"><a href="./2.html">Portfolio</a></li>
                    <li class=" wow fadeInUp" data-wow-delay=".3s"><a href="./3.html">About</a></li>
                    <li class="Contact wow fadeInUp" data-wow-delay=".4s"><a href="./4.html">Contact</a></li>
                    <li class="blog wow fadeInUp" data-wow-delay=".5s"><a href="#">Blog</a></li>
                    </li>
                    <li class="search wow fadeInUp" data-wow-delay=".6s">
                        serarch
                        <input type="checkbox" name="in1" id="im">
                        <label for="im" class="image"><img src="./assets/img/1/Vector Smart Object 3.png" alt=""><input
                                type="text"></label>

                    </li>
                </ul>

            </div>
        </div>
        </div>
    </nav>
    <!-- good -->
    <div class="good">
        <div class="slider">
            <div class="title wow fadeInUp" data-wow-delay=".2s">
                CONTACT
            </div>
        </div>
    </div>
    <!-- pro -->
    <div class="pro">
        <div class="title wow fadeInUp" data-wow-delay=".2s">
            TASTE IT THE GOOD PROJECTS
        </div>
        <div class="nav">
            <div class="cen ">
                <div class="left wow fadeInLeft" data-wow-delay=".3s">
                    <a href="">ALL </a>
                    <div>|</div>
                    <a href="">WEB DESIGN </a>
                    <div>|</div>
                    <a href="">ADVERTISING </a>
                    <div>|</div>
                    <a href="">IDENTITY </a>
                    <div>|</div>
                    <a href="">ILLUSTRATION</a>
                   
                </div>
                <div class="ths"><div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        ALL <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">WEB DESIGN</a></li>
                        <li><a href="#">ADVERTISING</a></li>
                        <li><a href="#">IDENTITY</a></li>
                        <li><a href="#">ILLUSTRATION</a></li>
                        
                    </ul>
                </div></div>
                
                <div class="right wow fadeInRight" data-wow-delay=".3s">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            CATEGORY <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Lorem</a></li>
                            <li><a href="#">Ipsum</a></li>
                            <li><a href="#">Dolar</a></li>
                            <li><a href="#">Sit Amet</a></li>
                            <li><a href="#">Kullar</a></li>
                        </ul>
                    </div>
                    <div class="glyphicon glyphicon-align-justify" style="color:#aaaaaa;font-size: 1.5em;"></div>
                    <div class="glyphicon glyphicon-th" style="color:#12a3d6;font-size: 1.5em;"></div>
                </div>
            </div>
        </div>
        <div class="content">
            <input type="radio" name="ra" id="ra1" checked>
            <div class="ima wow fadeInLeft">
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
            </div>
            <input type="radio" name="ra" id="ra2">
            <div class="ima wow fadeInLeft">
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
               
            </div>
            <input type="radio" name="ra" id="ra3">
            <div class="ima wow fadeInLeft">
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
                
                
                <div class="ne">
                    <div class="cir"></div>
                </div>
            </div>
            <input type="radio" name="ra" id="ra4">
            <div class="ima wow fadeInLeft">
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
                <div class="ne">
                    <div class="cir"></div>
                </div>
                
                
                <div class="ne">
                    <div class="cir"></div>
                </div>
            </div>
        </div>

        <div class="page wow fadeInLeft" data-wow-delay=".2s">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li id="lip">
                        <a  aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    <li id="li1" class="active"><a >1</a></li>

                    <li id="li2"><a >2</a></li>

                    <li id="li3"><a >3</a></li>

                    <li id="li4"><a >4</a></li>
                    <li id="lir">
                        <a  aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>

    </div>
    <div class="cli">
        <div class="title wow fadeInUp" data-wow-delay=".2s">CLIENTS</div>
        <div class="content wow fadeInDown" data-wow-delay=".2s">
            <img src="./assets/img/4/10.png" alt="">
            <img src="./assets/img/4/11.png" alt="">
            <img src="./assets/img/4/12.png" alt="">
            <img src="./assets/img/4/13.png" alt="">
            <img src="./assets/img/4/14.png" alt="">
            <img src="./assets/img/4/15.png" alt="">

        </div>
    </div>
<div class="test">
    <div class="demo wow fadeInDown" data-wow-delay=".5s">
        <h1>Testimonials</h1>
        <h3>“Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris necip 
            at lacus commodo suscipit praesent sollicitudin enim vel mirhon”</h3>
    </div>
    <div class="bottom wow fadeInDown" data-wow-delay=".6s">
        <div class="ti">
            <h1>Jon Doe <p> &nbsp;/ CEO of LoremIpsum</p></h1>
        </div>
        <div class="bo">
            <div class="list">
                <img src="./assets/img/1/Vector Smart Object.png" alt="">
            </div>
            <div class="list">
                <img src="./assets/img/1/Vector Smart Object 2.png" alt="">
            </div>
            <div class="list">
                <img src="./assets/img/1/Vector Smart Object.png" alt="">
            </div>
        </div>
    </div>
</div>
    <!-- footer -->
    <div class="footer">
        <div class="tw wow fadeInLeft" data-wow-delay=".2s">
            <div class="title">
                Twitter FEEDs
            </div>
            <div class="cen">
                <h1>
                    Check out this great theme item

                    <a href="">http://tadjalskfj.com</a><br>
                    2 weeks ago
                </h1>
                <div class="fg"></div>
                <h1>
                    Check out this great theme item

                    <a href="">http://tadjalskfj.com</a><br>
                    2 weeks ago
                </h1>
                <div class="fg"></div>
                <h1>
                    Check out this great theme item

                    <a href="">http://tadjalskfj.com</a><br>
                    2 weeks ago
                </h1>
            </div>

        </div>
        <div class="new wow fadeInLeft" data-wow-delay=".3s">
            <div class="title">
                NEWSLETTER
            </div>
            <div class="cen">
                <h1>
                    Lorem ipsum dolor sit amet, consectetur adip
                    iscing elit. Ut ultricies sagittis magna a comm.
                    Ut eget eros mauris, ut cursus urna.
                </h1>
                <div class="fg"></div>
            </div>

            <div class="email">
                <div class="top">Your Email Address</div>
                <input type="text">
                <button>Sign Up</button>
            </div>
        </div>
        <div class="rec wow fadeInLeft" data-wow-delay=".4s">
            <div class="title">
                recent projects
            </div>
            <div class="cen">
                <div class="zheng"></div>
                <div class="dis">
                    <h1>
                        Sketchy Business Card
                        <a href="">http://tadjalskfj.com</a><br>
                        2 weeks ago
                    </h1>

                </div>
            </div>
            <div class="fg"></div>
            <div class="cen">
                <div class="zheng"></div>
                <div class="dis">
                    <h1>
                        Sketchy Business Card
                        <a href="">http://tadjalskfj.com</a><br>
                        2 weeks ago
                    </h1>

                </div>
            </div>
            <div class="fg"></div>
            <div class="cen">
                <div class="zheng"></div>
                <div class="dis">
                    <h1>
                        Sketchy Business Card
                        <a href="">http://tadjalskfj.com</a><br>
                        2 weeks ago
                    </h1>

                </div>
            </div>
        </div>
        <div class="con wow fadeInLeft" data-wow-delay=".5s">
            <div class="title">
                Contact
            </div>

            <div class="list">
                <img src="./assets/img/1/5.png" alt="">
                <div class="demo">
                    1 - 000 - 000-0000 <br>
                    1 - 000 - 000-0000
                </div>
            </div>
            <div class="list">
                <img src="./assets/img/1/Shape 54.png" alt="">
                <div class="demo">
                    1 - 000 - 000-0000 <br>
                    1 - 000 - 000-0000
                </div>
            </div>
            <div class="list">
                <img src="./assets/img/1/Shape 53.png" alt="">
                <div class="demo">
                    abcdefg@hijs.dfh <br>
                    fjashfaf@jkfs.ckd
                </div>
            </div>

        </div>
    </div>
</body>

</html>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/less.min.js"></script>
<script src="./assets/js/wow.min.js"></script>
<script>
    new WOW().init();
</script>
<script>
    $(document).ready(function () {

        $("#lip").click(function (e) {
            var k = 0;
            for (var i = 0; i < 5; i++) {
                if ($("#ra" + i).prop("checked")) {
                    k = i;
                    break
                }
            }
            if (k == 1) {
                k = 4
            } else {
                k -= 1;
            }
            $("li").removeClass("active")
            $("#li" + k).addClass("active")
            $("#ra" + k).prop("checked", "checked")

        })

        $("#lir").click(function (e) {
            var k = 0;
            for (var i = 0; i < 5; i++) {
                if ($("#ra" + i).prop("checked")) {
                    k = i;
                    break
                }
            }
            if (k == 4) {
                k = 1
            } else {
                k += 1;
            }

            $("li").removeClass("active")
            $("#li" + k).addClass("active")
            $("#ra" + k).prop("checked", "checked")

        })
        for (var i = 0; i < 5; i++) {

            const m = "#li" + i
            const n = "#ra" + i
            console.log(m);
            $(m).click(function (e) {
                console.log("fdafd");
                $("li").removeClass("active")
                $(m).addClass("active")
                console.log(m);
                $(n).prop("checked", "checked")
            })
        }


    })
</script>